/**
* Line note button on the side of diffs
*/
.diff-grid-left:hover,
.diff-grid-right:hover,
.line_holder .is-over:not(.no-comment-btn) {
  .add-diff-note {
    opacity: 1;
    z-index: 101;
  }
}

.tooltip-wrapper.add-diff-note {
  margin-left: -52px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

.note-button.add-diff-note {
  @apply gl-bg-default;
  @apply gl-text-feedback-info;
  opacity: 0;
  will-change: opacity;
  border-radius: 50%;
  padding: 1px;
  font-size: 12px;
  border: 1px solid var(--gl-feedback-info-icon-color);
  width: 24px;
  height: 24px;

  &:hover,
  &.inverted {
    @apply gl-text-default;
    background: var(--gl-feedback-info-icon-color);
    border-color: var(--gl-feedback-info-icon-color);
  }

  &:active {
    outline: 0;
  }

  &[disabled] {
    @apply gl-bg-default;
    @apply gl-text-disabled;
    border-color: var(--gl-text-color-disabled);
    cursor: not-allowed;
  }
}

.unified-diff-components-diff-note-button {
  &::before {
    background-color: var(--gl-feedback-info-icon-color);
    mask-image: url('icons-stacked.svg#comment');
    mask-repeat: no-repeat;
    mask-size: cover;
    mask-position: center;
    content: '';
    width: 12px;
    height: 12px;
  }

  &:hover:not([disabled]),
  &.inverted {
    &::before {
      @apply gl-bg-default;
    }
  }
}

.disabled-comment {
  @apply gl-text-disabled;
  @apply gl-bg-subtle;
  @apply gl-rounded-base;
  @apply gl-py-3;
  @apply gl-px-0;

  a:not(.learn-more) {
    @apply gl-text-link;
  }
}

// Vue refactored diff discussion adjustments
.files {
  .diff-discussions {
    .note-discussion.timeline-entry {
      padding-left: 0;

      ul.notes li.note-wrapper {
        .timeline-content {
          padding: $gl-padding-8 $gl-padding-8 $gl-padding-8 $gl-padding;
        }

        .timeline-avatar {
          margin: $gl-padding-8 0 0 $gl-padding;
        }
      }

      ul.notes {
        li.toggle-replies-widget {
          margin-left: 0;
          border-left: 0;
          border-right: 0;
          border-radius: 0 !important;
        }

        .discussion-reply-holder {
          margin-left: 0;
        }
      }

      &:last-child {
        border-bottom: 0;
      }

      > .timeline-entry-inner {
        padding: 0;

        > .timeline-content {
          margin-left: 0;
        }

        > .timeline-icon {
          display: none;
        }
      }

      .discussion-body {
        padding-top: 0;

        .discussion-wrapper {
          border: 0;
        }
      }
    }
  }

  .diff-comment-form {
    display: block;
  }
}

.discussion-filter-container {
  .dropdown-menu {
    margin-bottom: $gl-padding-4;
  }
}

// Diff code on overview tab
.discussion-body .diff-file {
  .file-title {
    cursor: default;
    border-top: 0;
    border-radius: 0;
    margin-left: $note-spacing-left;

    &:hover {
      @apply gl-bg-subtle;
    }
  }

  .line_content {
    white-space: pre-wrap;
  }

  .diff-content {
    margin-left: $note-spacing-left;

    .line_holder td:first-of-type {
      @apply gl-border-l;
      @apply gl-border-l-section;
    }

    .line_holder td:last-of-type {
      @apply gl-border-r;
      @apply gl-border-r-section;
    }

    .discussion-notes {
      margin-left: -$note-spacing-left;

      .notes {
        background-color: transparent;
      }

      .notes-content {
        border: 0;
      }

      .timeline-content {
        border-top: 0 !important;
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
      }
    }
  }
}

.tab-pane.notes {
  .diff-file .notes .system-note {
    margin: 0;
  }
}

.tab-pane.diffs {
  .system-note {
    padding: 0 $gl-padding;
    margin-left: 20px;
  }

  .notes > .note-discussion li.note.system-note {
    border-bottom: 0;
    padding: 0;
  }
}

.diff-file {
  .diff-grid-left:hover,
  .diff-grid-right:hover,
  .is-over {
    .add-diff-note {
      display: inline-flex;
      justify-content: center;
      align-items: center;
    }
  }

  .discussion-notes {
    &:not(:last-child) {
      margin-bottom: 0;
    }

    .system-note {
      background-color: transparent;
      padding: 0;
    }
  }

  // Merge request notes in diffs
  // Diff is inline
  .notes-content .note-header .note-headline-light {
    display: inline-block;
    position: relative;
  }

  .notes_holder {
    font-family: $regular-font;

    .diff-td,
    td {
      @apply gl-border;
      border-left: 0;

      .discussion-notes .timeline-entry:first-of-type > .timeline-entry-inner {
        @apply gl-bg-section;
        @apply dark:gl-border-b-section;

        .toggle-replies-widget {
          @apply gl-border-b-subtle;
          @apply dark:gl-border-b-section;
        }

        .toggle-replies-widget[aria-expanded="false"] {
          @apply gl-border-b-0;
        }
      }

      .notes > .discussion-reply-holder {
        &:first-child {
          padding-top: $gl-padding-12;
        }

        &:not(:first-child):not(:nth-child(2)) {
          padding-top: 0;
        }
      }

      &.notes-content {
        border-width: 1px 0;
        padding: 0;
        vertical-align: top;
        white-space: normal;

        &.parallel {
          border-width: 1px;

          &.new {
            border-right-width: 0;
          }

          .note-header {
            flex-wrap: wrap;
            align-items: center;
          }
        }

        .notes {
          @apply gl-bg-subtle;
        }

        a code {
          top: 0;
          margin-right: 0;
        }
      }
    }
  }

  .diff-grid-comments:last-child {
    .notes-content {
      border-bottom-width: 0;
      border-bottom-left-radius: $gl-border-radius-base-inner;
      border-bottom-right-radius: $gl-border-radius-base-inner;
    }
  }
}

.diff-files-holder {
  .discussion-notes .timeline-entry:first-of-type > .timeline-entry-inner {
    @apply gl-border-b;
    @apply gl-border-b-subtle;
    @apply dark:gl-border-b-section;

    .timeline-entry:last-child .timeline-entry-inner {
      @apply gl-border-b-0;
    }
  }

}

.diffs {
  .discussion-notes {
    margin-left: 0;
    border-left: 0;
  }

  .note-wrapper {
    &.system-note {
      border: 0;
      margin-left: 20px;
    }
  }

  .discussion-reply-holder {
    border-top: 0;
    @apply gl-rounded-t-base;
    position: relative;

    .discussion-form {
      width: 100%;
      @apply gl-bg-subtle;
      padding: 0;
    }

    .disabled-comment {
      padding: $gl-vert-padding 0;
      width: 100%;
    }
  }
}

.code-commit .notes-content,
.diff-viewer > .image ~ .note-container {
  @apply gl-bg-subtle;
  @apply gl-rounded-b-base;

  li.note-comment {
    padding: $gl-padding-8 $gl-padding-8 $gl-padding-8 $gl-padding;

    .avatar {
      margin-right: 0;
    }

    .note-body {
      padding: $gl-padding-4 0 $gl-padding-8;
      @apply -gl-mt-4;
      margin-left: $note-spacing-left;
    }
  }
}

.diff-viewer > .image ~ .note-container form.new-note {
  margin-left: 0;
}

// Diff notes on overview tab
.notes.timeline > .timeline-entry.note-discussion .timeline-content .diff-content ul li:first-of-type {
  .timeline-content {
    margin-left: 0;
    border: 0;
    padding: 0;
  }

  .timeline-entry-inner {
    margin-left: $note-spacing-left;
    @apply gl-bg-subtle;
    @apply gl-border-l;
    @apply gl-border-l-section;
    @apply gl-border-r;
    @apply gl-border-r-section;

    .timeline-content {
      padding: $gl-padding-8 $gl-padding-8 $gl-padding-8 $gl-padding;
      @apply gl-bg-section;

      &:not(:last-child) {
        @apply gl-border-b;
        @apply gl-border-b-subtle;
        @apply dark:gl-border-b-section;
      }
    }

    .timeline-avatar {
      margin: $gl-padding-8 0 0 $gl-padding;
    }

    .timeline-discussion-body {
      margin-left: $note-spacing-reply-left;
    }
  }
}
